export const addCardComponent = (editor) => {
    const { Components } = editor;

    Components.addType('card-component', {
        model: {
            defaults: {
                tagName: 'div',
                resizable: true, // 允许调整大小
                attributes: { class: 'card','data-gjs-type':'card-component' },
                components: [
                    {
                        tagName: 'div',
                        resizable: true, // 允许调整大小

                        attributes: { class: 'card_load' },
                    },
                    {
                        tagName: 'div',
                        resizable: true, // 允许调整大小

                        attributes: { class: 'card_load_extreme_title' },
                       

                    },
                    {
                        tagName: 'div',
                        resizable: true, // 允许调整大小

                        attributes: { class: 'card_load_extreme_descripion' },
                    },
                ],
                styles: `
                    .card {
                        width: 190px;
                        height: 90px;
                        background: #ffff;
                        box-shadow: 0 1px 25px rgba(0,0,0,0.2);
                        padding: 12px 10px;
                    }

                    .card_load {
                        width: 70px;
                        height: 70px;
                        // position: relative;
                        float: left;
                        background: linear-gradient(120deg, #e5e5e5 30%, #f0f0f0 38%, #f0f0f0 40%, #e5e5e5 48%);
                        border-radius: 50%;
                        background-size: 200% 100%;
                        background-position: 100% 0;
                        animation: load89234 2s infinite;
                    }

                    .card_load_extreme_title {
                        width: 90px;
                        height: 10px;
                        // position: relative;
                        float: right;
                        border-radius: 5px;
                        background: linear-gradient(120deg, #e5e5e5 30%, #f0f0f0 38%, #f0f0f0 40%, #e5e5e5 48%);
                        background-size: 200% 100%;
                        background-position: 100% 0;
                        animation: load89234 2s infinite;
                    }

                    .card_load_extreme_descripion {
                        width: 90px;
                        height: 47px;
                        // position: relative;
                        float: right;
                        border-radius: 5px;
                        background: linear-gradient(120deg, #e5e5e5 30%, #f0f0f0 38%, #f0f0f0 40%, #e5e5e5 48%);
                        margin-top: 10px;
                        background-size: 200% 100%;
                        background-position: 100% 0;
                        animation: load89234 2s infinite;
                    }

                    @keyframes load89234 {
                        100% {
                            background-position: -100% 0;
                        }
                    }
                `,
                
            },
        },
    });

    editor.BlockManager.add('card-component', {
        label: '加载中组件',
        media: `<svg xmlns="http://www.w3.org/2000/svg" height="30px" viewBox="0 -960 960 960" width="30px" fill="#5f6368"><path d="M482-160q-134 0-228-93t-94-227v-7l-64 64-56-56 160-160 160 160-56 56-64-64v7q0 100 70.5 170T482-240q26 0 51-6t49-18l60 60q-38 22-78 33t-82 11Zm278-161L600-481l56-56 64 64v-7q0-100-70.5-170T478-720q-26 0-51 6t-49 18l-60-60q38-22 78-33t82-11q134 0 228 93t94 227v7l64-64 56 56-160 160Z"/></svg>`,
        category: '其他类',
        content: { type: 'card-component' },
    });
};
